<!doctype html>
<html>

<head>
  <title>新云空间</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="css/ncss.css">
  <link rel='icon' type='image/x-ico' href='favicons/cloud_16.ico ' />
  <style type="text/css">
    html {
      height: 100%;
      padding: 0;
      margin: 0;
    }

    body {
      height: 100%;
      padding: 0;
      margin: 0;
      background: url(resources/login_bg_01.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
      overflow: auto;
    }

    #login_panel {
      background-color:  rgba(255, 255, 255, 0.7);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
      border-radius: 10px;
      height: auto;
      padding: 10px 0;
      top: 50%;
      left: 8%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      position: absolute;
    }

    #logo_title {
      font-size: 30px;
      color: #223f52;
      text-align: center;
      padding: 10px 100px
    }

    input {
      font-size: 18px;
      padding: 4px 6px;
      width: 200px;
    }

    #login_tb {
      margin: 0px auto;
      border-spacing: 0px 10px;
    }

    label {
      font-size: 18px;
    }

    #btn_login {
      color: #fff;
      font-size: 20px;
      margin: 13px auto;
      border-radius: 5px;
      display: block;
      background-color: #4C777A;
      border: 0px;
      padding: 5px 20px;
    }

    #btn_login:hover {
      background-color: #C0D8CC;
    }

    #canvas_dh {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <canvas id="canvas_dh" style="background:transparent;width:'';height:''"></canvas>

  <div id="login_panel">
    <p id="logo_title">新云空间，欢迎您</p>
    <table id="login_tb">
      <tr>
        <td><label>用户名：</label></td>
        <td><input type="text"></input></td>
      </tr>
      <tr>
        <td><label>密码：</label></td>
        <td><input type="password"></input></td>
      </tr>
    </table>
    <button id="btn_login">登录</button>
  </div>

  <script type="text/javascript">
    var btn = document.getElementById("btn_login");
    btn.onclick = function (e) {
      //alert("hello world!");
      console.log("====。。。。。。。。。");
      //window.location.href = "modules/functionList.html";
    }

    function setupCanvas(canvas) {
      //https://www.cnblogs.com/fayin/p/10173984.html
      var dpr = window.devicePixelRatio || 1;
      var rect = canvas.getBoundingClientRect();

      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      console.log("=====!!!!", dpr);
      var ctx = canvas.getContext('2d');
      ctx.scale(dpr, dpr);

      return ctx;
    };

    var oc = document.querySelector("#canvas_dh");
    var ctx = setupCanvas(oc);

    function drawMethod() {
      //console.log(arr);
      console.log("====。。。。。。。。。");
      ctx.clearRect(0, 0, oc.width, oc.height);
      //console.log(arr);
      //console.log(new Date());
      //动画
      for (var i = 0; i < arr.length; i++) {
        arr[i].deg += 2;
        arr[i].x = arr[i].startX + Math.sin(arr[i].deg * Math.PI / 180) * arr[i].step * arr[i].degBeiShu;
        arr[i].y = arr[i].startY - (arr[i].deg * Math.PI / 180) * arr[i].step / 2;
        if (arr[i].y < 25) {
          arr.splice(i, 1);
        }
      }

      for (var i = 0; i < arr.length; i++) {
        ctx.save();
        ctx.fillStyle = "rgba(" + arr[i].red + "," + arr[i].green + "," + arr[i].blue + "," + arr[i].alp + ")";
        ctx.beginPath();
        ctx.arc(arr[i].x, arr[i].y, arr[i].r, 0, 2 * Math.PI);
        ctx.fill();
        ctx.restore();
      };

    };

    function pushArr() {
      if ((++countClose) == 1500) {
        clearInterval(timer1);
        clearInterval(timer2);
      }
      console.log("====。。。。。。。。。师傅是师傅");
      var r = Math.random() * 15 + 2;
      var x = Math.random() * oc.width;
      var y = oc.height - r;
      var red = Math.round(Math.random() * 255);
      var green = Math.round(Math.random() * 255);
      var blue = Math.round(Math.random() * 255);
      var alp = 1;
      var deg = 0;//角度
      var degBeiShu = Math.round(Math.random() * 5 + 2); //角度提升
      var startX = x;
      var startY = y;
      var step = Math.random() * 20 + 10;  //前进速度
      if (arr.length < 23) {
        arr.push({
          x: x, y: y, r: r, red: red, green: green, blue: blue, alp: alp, deg: deg, startX: startX, startY: startY, step: step, degBeiShu: degBeiShu
        });
      }
    };

    var arr = [];
    var timer1 = null;
    var timer2 = null;
    var countClose = 0;
    window.onload = function () {
      console.log("不支持动画。111");
     
      if (oc.getContext) {
        timer1 = setInterval(drawMethod, 1000 / 60);
        timer2 = setInterval(pushArr, 1500);
      }
      else {
        console.log("不支持动画。");
      }
    };

    window.onunload = function () {
      console.log("xxxxxx");
      clearInterval(timer1);
      clearInterval(timer2);
    } 
  </script>
</body>

</html>